<template>
    <div class="gray-bg">
	    <div class="row wrapper border-bottom white-bg page-heading">
	        <div class="col-lg-10 col-lg-offset-1">
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <router-link to="../../../../login"> <i class="fa fa-sign-out"></i> Log out </router-link>
                    </li>
                </ul>
	            <h2>新广告素材</h2>
	            <ol class="breadcrumb">
	                <li>
	                    <a> WeShare Partner </a>
	                </li>
	                <li>
	                	<router-link to="./../../List"> 广告推广渠道 </router-link>
	                </li>
	                <li>
	                	<router-link to="./../AD/List"> 广告版式 </router-link>
	                </li>
	                <li class="active">
	                    <strong>新广告素材</strong>
	                </li>
	            </ol>
	        </div>
	    </div>
		<div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>新广告素材</h5>
                        </div>
                        <div class="ibox-content">
                        	<div class="row">
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>广告名称 <span class="color-red">*</span></label>
									<input type="text" placeholder="请输入广告素材名称" class="form-control m-b" v-model='adname'>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>选择广告大小类型 <span class="color-red">*</span></label>
									<select class="form-control m-b" name="account" v-model='type'>
										<option value='BANNER'>BANNER</option>
										<option value='MERC'>MERC</option>
										<option value='NATIVE'>NATIVE</option>
									</select>
                                </div>
                        		<div class="form-group col-lg-6 col-lg-offset-3 ">
									<label>广告资源 <span class="color-red">*</span></label>
									<br>
									<small class="color-red">
										图片名称不能包含全角字符
									</small>
									<br>
									<img class="" v-bind:src="this.url"/>
									<form id="form" v-bind:action="uploadImgUrl" method="post" enctype="multipart/form-data">
										<div>
										<input id='file' type="file" name="file" class="m-b" v-on:change="imgUpload"/>
										</div> 
									</form>

                                </div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>广告标题 <span class="color-red">*</span></label>
									<input type="text" placeholder="请输入需要展示的广告标题" class="form-control m-b" v-model='title'>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>广告描述 <span class="color-red">*</span></label>
									<textarea class="form-control m-b" rows="3" cols="20" placeholder="请输入需要展示的广告描述内容" v-model='description'>
									</textarea>
								</div>
                        		<div class="form-group col-lg-6 col-lg-offset-3">
									<label>广告按钮文字 <span class="color-red">*</span></label>
									<input type="text" placeholder="请输入广告按钮文字" class="form-control m-b" v-model='button'>
								</div>
								<div class="ibox float-e-margins">
			                        <div class="ibox-content">
			                            <div class="text-center">
			                            	<a class="btn btn-primary" @click='post'>保存</a>
			                            </div>   
			                    	</div>
			                	</div>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// 图片预览框
// import $ from '../../../../static/js/jquery-2.1.1.js'
// import qwe from '../../../../static/js/jquery.form.js'
// import '../../../../static/css/toastr.min.css'

import fileinputServer from '@/components/server/fileinput.js'
import config from '../../../../config/config.js'
import toastr from '../../../../static/js/toastr.min'

export default {
	name: 'test',
  	data () {
		return {
			// 广告名称
			adname: '',
			// 类型
			type: '',
			// 广告资源
			url: '',
			// url: 'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=98178877,967072593&fm=85&s=949DAF7655436EE920D8FCFE0300F033',
			// 广告标题
			title: '',
			// 描述
			description: '',
			// 按钮文字
			button: '',
			// 图片上传地址
			uploadImgUrl: "http://" + config.URL + "/file/upload"
    	}
  	},
  	created () {
  		// this.asdas
  		// const wewe = this.asdas;
  		// setTimeout(fileinputServer.asdad(),1000)
  		// console.log("created");
  		// fileinputServer.asdad()
  		// toastr.error('提交成功')
  	},
	  beforeRouteEnter (to, from, next) {
	    // 在渲染该组件的对应路由被 confirm 前调用
	    // 不！能！获取组件实例 `this`
	    // 因为当钩子执行前，组件实例还没被创建
	    // console.log('beforeRouteEnter')
	    // fileinputServer.asdad()
	    next();
	  },

  	methods: {
  		post () {
  			// console.log(this.adname)
  			// console.log(this.url)
  			// console.log(this.title)
  			// console.log(this.description)
  			// console.log(this.button)
  			// console.log(this.type)
  			const vm = this;
  			if (!this.adname || !this.url || !this.title || !this.description || !this.button || !this.type ) {
  				toastr.error("请填写完整信息");
  				return;
  			} else {
  				toastr.info("提交中...");

  				  			$.ajax({
  				  			    url:'http://' + config.URL + '/ad/addAd',
  				  			    dataType:"jsonp",
  				  			    async: false, 
  				  			    processData:true,
  				  			    type:'get',
  				  			    data: {
  									"adname": vm.adname,
  									"url": vm.url,
  									"title": vm.title,
  									"description": vm.description,
  									"button": vm.button,
  									"type": vm.type,
  									"cid": vm.$route.params.channelid
  				  			    },  
  				  			    jsonp:"callback",
  				  			    timeout: 5000,
  				  			    success:function(data, status){
  				  			        // console.log(status);
  				  			        // console.log(data);
  				  			        if (data.code == 1) {
  					                    toastr.success("渠道数据提交成功");
  					                    // setTimeout(vue.$router.push({ name: 'ChannelList', params: { username: vue.$route.params.username }}), 1500);
  				  			        	vm.$router.push({
  				  			        		name: 'ADList',
  				  			        		params: {
  				  			        			username: vm.$route.params.username, channelid: vm.$route.params.channelid
  				  			        		}
  				  			        	})
  				  			        } else {
  						                toastr.error("请求出错，请稍后再试");
  				  			        }
  				  			    },
  				  			    error:function(XHR, textStatus, errorThrown){
  				                    toastr.error("请求出错，请稍后再试");
  				  			    }
  				  			});

  			}

  		},
  		imgUpload () {
  			const vm = this;
  			const check = (s) => {   
  			    let str = s.replace(/[^\x00-\xff]/g, '');
  			    if (s.length != str.length) {
  			    	return false;
  			    } else {
  			    	return true;
  			    }
  			}
  			// 图片从有到无的场合
  			if (!$("#file").val()){
  				return true;
  			}
  			if (check($("#file").val().substring($("#file").val().lastIndexOf("\\") + 1))) {			
	  			// true 无全角字符的场合
  				toastr.info("图片上传中")
	  			$("form").ajaxSubmit(function(data){
	  				// console.log(JSON.parse(data));
	  				// console.log(JSON.parse(data).data);
	  				if (JSON.parse(data).code == 1) {
	  					// 上传成功的场合
	  					vm.url = JSON.parse(data).data;
	  					toastr.success("图片上传成功")
	  				} else {
	  					toastr.error("图片上传失败")
	  				}
	  			    
	  			}); 
  			} else {
  				// false 有全角字符的场合
  				toastr.error("您选择的图片名称包含全角字符，请重新选择。")
  				$("#file").val('');
  			}
  		}
  	}  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.container {
		width: 100%;
	    padding-right: 0px;
	    padding-left: 0px;
	}

	img {
    	max-height: 200px;
	}
</style>
